<div class="omv-form-checkbox-wrapper mat-form-field omv-display-flex omv-flex-1 omv-flex-column"
     [formGroup]="formGroup">
  <mat-checkbox [formControlName]="config.name"
                [checked]="config.value"
                [required]="config.validators?.required">
    {{ config.label | transloco }}
  </mat-checkbox>
  <mat-error *ngIf="formGroup.invalid">
    <span *ngIf="formGroup.hasError('required', config.name)">
      {{ 'This field is required.' | transloco }}
    </span>
    <span *ngIf="formGroup.hasError('constraint', config.name)">
      {{ formGroup.getError('constraint', config.name) | transloco }}
    </span>
  </mat-error>
  <mat-hint *ngIf="config.hint?.length > 0 && !formGroup.get(config.name)?.errors"
            [innerHTML]="config.hint | transloco | sanitizeHtml">
  </mat-hint>
</div>
